<template>
  <el-container>
    <!-- 侧边导航区 -->
    <el-aside width="auto">
      <NavMenu />
    </el-aside>
    <!-- 右侧主页面 -->
    <el-container>
      <el-header height="50px">
        <Header />
      </el-header>
      <!-- 页面中心 -->
      <el-main>
        <!-- 导航标签 -->
        <BreadCrumb />
        <!-- 页面出现动画，但有点bug -->
        <!-- <transition name="el-fade-in"> -->
        <keep-alive :include="includeTag" :exclude="exculdeTag">
          <router-view></router-view>
        </keep-alive>
        <!-- </transition> -->
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapState } from "vuex";
import NavMenu from "../NavMenu/NavMenu.vue";
import Header from "../Header/Header.vue";
import BreadCrumb from "../BreadCrumb/BreadCrumb.vue";
export default {
  name: "Main",
  components: {
    NavMenu,
    Header,
    BreadCrumb,
  },
  computed: {
    ...mapState('menuSwitch', ['tabsList', 'exculdeTag']),
    includeTag() {
      return this.tabsList.map(item => item.name)
    }
  }
};
</script>

<style scoped lang='less'>
.el-container {
  height: 100%;
}

.el-header {
  background-color: #3f4d67;
  line-height: 50px;
  color: #fff;
}

.el-main {
  background-color: #f4f7fa;
  color: #333;
}
</style>